<template>
    <div class="container">
        <div class="mian" ref="mian">
            <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" class="login">
                <div class="form-item-container">
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" clearable placeholder="请输入账号" :prefix-icon="User" type="text"
                            autocomplete="off" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" show-password clearable placeholder="请输入密码"
                            :prefix-icon="Lock" type="password" autocomplete="off" />
                    </el-form-item>
                    <div class="login-btn">
                        <el-button type="success" @click="changePanel" style="margin-right: 20px;">注册</el-button>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                    </div>
                </div>
            </el-form>
            <Register :changePanel="changePanel" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import axios from 'axios'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const mian = ref()
const islogin = ref(true)

const ruleForm = reactive({
    username: '',
    password: '',
})
const changePanel = () => {
    if (islogin.value) {
        mian.value.classList.add('toRegister')
        mian.value.classList.remove('tologin')
    } else {
        mian.value.classList.add('tologin')
        mian.value.classList.remove('toRegister')
    }
    islogin.value = !islogin.value
}
const rules = reactive<FormRules>({
    username: [{
        required: true,
        message: '用户名不能为空！',
        trigger: 'submit'
    },
    { min: 3, max: 18, message: '用户名长度为3-18位', trigger: 'blur' },
    { pattern: /^[a-zA-z][\d\w]/, message: '用户名为数字或字母，必须以字母开头', trigger: 'blur' }
    ],
    password: [{
        required: true,
        message: '密码不能为空！',
        trigger: 'submit'
    },
    { min: 5, max: 18, message: '密码长度为5-18位', trigger: 'blur' }
    ],
})

watch(ruleForm, () => { // 输入内容清除表单状态
    ruleFormRef.value?.clearValidate()
}, {
    deep: true
})

const submitForm = (formEl: FormInstance | undefined) => {
    formEl?.validate((valid: boolean) => {
        if (valid) {
            axios.post('/user/login', {
                username: ruleForm.username,
                password: ruleForm.password
            }).then(({ data }) => {
                if (data.code == '0000') {
                    let token = data.data.token
                    localStorage.setItem('token', token)
                    ElMessage({
                        message: '登录成功！',
                        type: 'success',
                    })
                    router.push('/home')
                } else {
                    ElMessage({
                        message: data.msg,
                        type: 'error',
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
        } else {
            ElMessage({
                message: '验证失败!',
                type: 'error',
            })
            return false
        }
    })
    return;
}
</script>


<style scoped lang="less">
.container {
    width: 100vw;
    height: 100vh;
    background: url('/images/bg.png') center/100% no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;

    .mian {
        width: 400px;
        height: 400px;
        transform-style: preserve-3d;
        transition: 2s;
    }

    .tologin {
        transform: perspective(500px) rotateY(0deg);
    }

    .toRegister {
        transform: perspective(500px) rotateY(180deg);
    }

    .login {
        width: 400px;
        height: 250px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -125px 0 0 -200px;
        background-color: rgba(0, 0, 0, .5);
        display: flex;
        flex-direction: column;
        align-items: center;
        backface-visibility: hidden;
        transform: rotateY(0deg);
        border-radius: 5px;

        :deep(.form-item-container) {
            height: inherit;
            width: 70%;
            padding-top: 60px;
        }

        :deep(.login-btn) {
            display: flex;
            justify-content: center;
        }
    }

    .register {
        transform: rotateY(180deg);
    }

}
</style>
